import React,{Component} from "react";
import {connect} from "react-redux";
import * as actions from '../action';
import { Carousel } from 'antd';
const mapStateToProps=(state)=>{
    console.log(state.counter);
    return{
        rows:state.counter.news.rows,
        totle:state.counter.news.totle
    }
}
 class Home extends Component{
    componentDidMount(){
        // console.log(this.props);
        this.props.fetchnews();
     }
     shownews(){
        var jsx=[];
       this.props.rows.map((item,index)=>{
           jsx.push( 
           <div key={index} className="col-md-4">
            <div className="card  newbox" style={{width:300,height:500}}>
               <img src={item.img} className="card-img-top" style={{width:300,height:300}} alt=""/>
               <div className="card-body">
                   <h4 className="card-title producth5">{item.title}</h4>
                   <p className="card-text productp">{item.content}</p>
               </div>
             </div>
           </div>
           )
       })
       return jsx;
    }
    render() {
        
        return(
            <div>
                <Carousel autoplay>
                    <div><img className="homepic" src="http://attach.bbs.miui.com/forum/201408/08/113552jhaqvf9fobbb4zdu.jpg"/></div>
                    <div><img className="homepic" src="http://pic1.win4000.com/wallpaper/2018-01-17/5a5eb4f898a5f.jpg"/></div>
                    <div><img className="homepic" src="http://pic1.win4000.com/wallpaper/b/599a960652fbb.jpg"/></div>
                    <div><img className="homepic" src="http://pic1.win4000.com/wallpaper/2017-12-12/5a2fa21f00d3b.jpg"/></div>
                </Carousel>
                <div className="container homenews">
                <h2 className="homeh1">新闻</h2>
                    {this.shownews()}
                </div>
            </div>
        )
    }
}
export default connect(mapStateToProps,actions)(Home);